@using OrchardCore.Themes.Services
@using OrchardCore.ResourceManagement.TagHelpers
@inject DarkModeService DarkModeService;
@{
    var darkMode = await DarkModeService.IsDarkModeAsync();
}
<!DOCTYPE html>
<html lang="@Orchard.CultureName()" dir="@Orchard.CultureDir()" data-theme="@DarkModeService.CurrentTheme">
<head>
    <title>@RenderTitleSegments(Site.SiteName, "before")</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link type="image/x-icon" rel="shortcut icon" href="~/TheAdmin/favicon.ico" />

    <!-- Bootstrap CSS -->
    <style asp-name="admin" version="1"></style>

    <script asp-name="font-awesome" at="Foot" version="6"></script>
    <script asp-name="font-awesome-v4-shims" at="Foot" version="6"></script>

    <resources type="Header" />
</head>
<body>
    <div class="ta-content ta-content-login">
        @await RenderSectionAsync("Header", required: false)
        @await RenderSectionAsync("Messages", required: false)

        <div class="auth-wrapper">222222222222222222222222222
              <div id="app">
                <style>
                  html[data-theme='dark'] .app-loading {
                    background-color: #2c344a;
                  }

                  html[data-theme='dark'] .app-loading .app-loading-title {
                    color: rgb(255 255 255 / 85%);
                  }

                  .app-loading {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    background-color: #f4f7f9;
                  }

                  .app-loading .app-loading-wrap {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    display: flex;
                    transform: translate3d(-50%, -50%, 0);
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                  }

                  .app-loading .dots {
                    display: flex;
                    padding: 98px;
                    justify-content: center;
                    align-items: center;
                  }

                  .app-loading .app-loading-title {
                    display: flex;
                    margin-top: 30px;
                    font-size: 30px;
                    color: rgb(0 0 0 / 85%);
                    justify-content: center;
                    align-items: center;
                  }

                  .app-loading .app-loading-logo {
                    display: block;
                    width: 90px;
                    margin: 0 auto;
                    margin-bottom: 20px;
                  }

                  .dot {
                    position: relative;
                    display: inline-block;
                    width: 48px;
                    height: 48px;
                    margin-top: 30px;
                    font-size: 32px;
                    transform: rotate(45deg);
                    box-sizing: border-box;
                    animation: antRotate 1.2s infinite linear;
                  }

                  .dot i {
                    position: absolute;
                    display: block;
                    width: 20px;
                    height: 20px;
                    background-color: #0065cc;
                    border-radius: 100%;
                    opacity: 30%;
                    transform: scale(0.75);
                    animation: antSpinMove 1s infinite linear alternate;
                    transform-origin: 50% 50%;
                  }

                  .dot i:nth-child(1) {
                    top: 0;
                    left: 0;
                  }

                  .dot i:nth-child(2) {
                    top: 0;
                    right: 0;
                    animation-delay: 0.4s;
                  }

                  .dot i:nth-child(3) {
                    right: 0;
                    bottom: 0;
                    animation-delay: 0.8s;
                  }

                  .dot i:nth-child(4) {
                    bottom: 0;
                    left: 0;
                    animation-delay: 1.2s;
                  }
                  @@keyframes antRotate {
                    to {
                      transform: rotate(405deg);
                    }
                  }
                  @@keyframes antRotate {
                    to {
                      transform: rotate(405deg);
                    }
                  }
                  @@keyframes antSpinMove {
                    to {
                      opacity: 100%;
                    }
                  }
                  @@keyframes antSpinMove {
                    to {
                      opacity: 100%;
                    }
                  }
                </style>
                <div class="app-loading">
                  <div class="app-loading-wrap">
                    <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
                    <div class="app-loading-dots">
                      <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
                    </div>
                    <div class="app-loading-title"><%= title %></div>
                  </div>
                </div>
              </div>  @await RenderBodyAsync()
        </div>
    </div>

    @await RenderSectionAsync("Footer", required: false)

    <resources type="Footer" />
</body>
</html>
